// 缓存元素
var ipt = document.querySelector('.ipt');
var list = document.querySelector('.list');
var add = document.querySelector('.add');
var all = document.querySelector('#all');
var done = document.querySelector('.done');
var remove = document.querySelector('.removes');
var doneList = document.querySelector('.doneList');

//添加任务
add.onclick = function (){
    var addText = ipt.value;
    if ( !addText ) {// 空值判断
        return;
    }
    // 要插入的dom结构
    var newLi = document.createElement('li')
    newLi.innerHTML = '<input type="checkbox"><span class="con">'+addText+'</span><span class="remove">删除</span><span class="edit">编辑</span>'
    list.appendChild(newLi)
    // 判断全部是否勾选
    if ( all.checked ){
        var checks = document.querySelectorAll('.list input');
        for (var i = 0, len = checks.length; i < len; i++){
            checks[i].checked = true;
        }
    }
    ipt.value = '';// 清空输入框
};

//选择任务（事件委托） 
on(list,'click','input',function (){
    var checks = document.querySelectorAll('.list input');
    // 遍历所有任务的勾选状态
    for (var i = 0, len = checks.length; i < len; i++){
        if ( !checks[i].checked ) {
            all.checked = false;
            return false
        }
    }
    all.checked = true;
});

// 编辑任务
on(list,'click','.edit',function (){
    // 保存当前任务内容
    var conTxt = this.parentNode.children[1].innerText;
    // 创建输入框
    var replaceDom = document.createElement('input');
    replaceDom.className = 'repIpt';
    replaceDom.value = conTxt;
    // 用输入框替换原来的任务节点
    this.parentNode.replaceChild(replaceDom,this.parentNode.children[1]);
    // 自动获得焦点
    replaceDom.focus();

    // 编辑完成
    replaceDom.onblur = function (){
        // 创建任务节点 <span class="con">任务1</span>
        var newSpan = document.createElement('span');
        newSpan.className = 'con';
        newSpan.innerText = this.value;
        // 用任务节点来替换输入框
        this.parentNode.replaceChild(newSpan,this);
    }
});

// 删除单条任务
on(list,'click','.remove',function (){
    this.parentNode.parentNode.removeChild(this.parentNode);
    var checks = document.querySelectorAll('.list input');
    // 遍历所有任务的勾选状态
    for (var i = 0, len = checks.length; i < len; i++){
        if ( !checks[i].checked ) {
            all.checked = false;
            return false
        }
    }
    all.checked = true;
});

// 点击全部
all.onclick = function (){
    var checks = document.querySelectorAll('.list input');
    for (var i = 0, len = checks.length; i < len; i++){
        if ( this.checked ) {
            checks[i].checked = true;
        } else {
            checks[i].checked = false;
        }
    }
}

// 批量处理
done.onclick = function (){
    var checks = document.querySelectorAll('.list input');
    for (var i = 0, len = checks.length; i < len; i++){
        if ( checks[i].checked ) {
            // 已勾选任务的内容
            var tastTxt = checks[i].parentNode.children[1].innerText;
            // 创建已处理任务节点
            var doneLi = document.createElement('li');
            doneLi.innerText = tastTxt;
            doneList.appendChild(doneLi);
            // 删除列表中对应的任务节点
            checks[i].parentNode.parentNode.removeChild(checks[i].parentNode);
            // 取消全选
            all.checked = false;
        }
    }
}

// 批量删除
remove.onclick = function (){
    var checks = document.querySelectorAll('.list input');
    for (var i = 0, len = checks.length; i < len; i++){
        if ( checks[i].checked ) {
            // 删除代表列表中对应的任务
            checks[i].parentNode.parentNode.removeChild(checks[i].parentNode);
            // 取消全选
            all.checked = false;
        }
    }
}
